<template>
	<div>
		
		<div @click="onClick">
			<div>
				<img :src="index==selectIndex?tabbarItem.icon_active:tabbarItem.icon" width="24px">
			</div>
			
			<div>
				<div :class="index==selectIndex?'title':'title_active'">{{tabbarItem.title}}</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object
			},
			index:Number,
			selectIndex:Number
		},
		data(){
			return{
				tabbarItem:this.item
			}
		},
		methods:{
			onClick(){
				this.$router.push(this.tabbarItem.path)
				this.$emit('changeIndex',this.index)
			}
		}
		
	}
</script>

<style scoped="scoped">
	.title{
		color: red;
	}
	.title_active{
		color: #000000;
	}
</style>
